<script setup lang="ts">
defineOptions({
  name: "fabBoardMachine"
});

import { ref, nextTick, inject, watch, getCurrentInstance } from "vue";
import { PxMessageBox } from "px-ui";
import fabBoardEchartsModelBoxItem from "../fabBoardEchartsModelBoxItem.vue";
import { spcquerySpcAnalysis } from "@/api/spc";
import dayjs from "dayjs";

const { proxy }: any = getCurrentInstance();

const configOptions = inject("configOptions", ref<Array<any>>([]));
const module_height = inject("moduleHeight", ref<string>(""));

const loading = ref<boolean>(false);
const machineData = ref<Array<Record<string, any>>>([]);
const target = ref<Array<string>>([]);
const params = ref<Record<string, any> | null>(null);

const machineTemperatureRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machineHumidityRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machineParticleRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machinePCWFlowRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machinePCWPressureRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machinePVPressureRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);

const machineTemperatureData = ref<Record<string, any> | null>(null);
const machineHumidityData = ref<Record<string, any> | null>(null);
const machineParticleData = ref<Record<string, any> | null>(null);
const machinePCWFlowData = ref<Record<string, any> | null>(null);
const machinePCWPressureData = ref<Record<string, any> | null>(null);
const machinePVPressureData = ref<Record<string, any> | null>(null);

const machineTemperatureTitle = ref<string>("温度");
const machineHumidityTitle = ref<string>("湿度");
const machineParticleTitle = ref<string>("Particle");
const machinePCWFlowTitle = ref<string>("PCW流量");
const machinePCWPressureTitle = ref<string>("PCW压力");
const machinePVPressureTitle = ref<string>("PV压力");

const machineTemperatureUnit = ref<string>("℃");
const machineHumidityUnit = ref<string>("%");
const machineParticleUnit = ref<string>("μg/m³");
const machinePCWFlowUnit = ref<string>("m³/s");
const machinePCWPressureUnit = ref<string>("Pa");
const machinePVPressureUnit = ref<string>("Pa");

const mapConfigOptionsFn = (val: string) => {
  const c = configOptions.value.filter(item => item.className === "MACHINE" && item.chartType === "spc" && item.areaId === val);
  target.value = c?.map(item => item?.quotaCode);
  return !c?.length;
};

const areaChangeHandler = async (val: string, flag: boolean = false) => {
  machineTemperatureData.value = null;
  machineHumidityData.value = null;
  machineParticleData.value = null;
  machinePCWFlowData.value = null;
  machinePCWPressureData.value = null;
  machinePVPressureData.value = null;
  const flag2 = mapConfigOptionsFn(val);
  await init(flag, flag2);
};

const startLoading = () => {
  loading.value = true;
};

const closeLoading = () => {
  loading.value = false;
};

const exportDataHandler = (data: Record<string, any> = {}) => {
  const { point = "" } = data;
  const pointList = [point];
  proxy.download("post", "/operation/api/v1/spcIndicator/querySpcAnalysis/export", { ...params.value, pointList });
  PxMessageBox.alert("正在导出数据，数据处理可能需要一定时间，请耐心等待，数据准备完毕将直接下载。", "导出数据", {
    confirmButtonText: "我知道了"
  });
};

const getParams = () => {
  const startTime = dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss");
  const endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  const timePeriod = "minutes";
  // 调试
  // const timePeriod = "hour";
  const jobIdList = null;
  const pointList = [...target.value];
  params.value = { startTime, endTime, timePeriod, jobIdList, pointList };
};

const queryData = async () => {
  getParams();
  machineTemperatureRef.value.loading = true;
  machineHumidityRef.value.loading = true;
  machineParticleRef.value.loading = true;
  machinePCWFlowRef.value.loading = true;
  machinePCWPressureRef.value.loading = true;
  machinePVPressureRef.value.loading = true;
  const res = await spcquerySpcAnalysis({ ...params.value }, () => {
    closeLoading();
    machineTemperatureRef.value.loading = false;
    machineHumidityRef.value.loading = false;
    machineParticleRef.value.loading = false;
    machinePCWFlowRef.value.loading = false;
    machinePCWPressureRef.value.loading = false;
    machinePVPressureRef.value.loading = false;
  });
  machineData.value = res;
  for (const d of res) {
    switch (d.point) {
      case target.value[0]:
        machineTemperatureData.value = d;
        break;
      case target.value[1]:
        machineHumidityData.value = d;
        break;
      case target.value[2]:
        machineParticleData.value = d;
        break;
      case target.value[3]:
        machinePCWFlowData.value = d;
        break;
      case target.value[4]:
        machinePCWPressureData.value = d;
        break;
      case target.value[5]:
        machinePVPressureData.value = d;
        break;
    }
  }
};

const init = async (flag: boolean = false, flag2: boolean = false) => {
  startLoading();
  !flag2 && (await queryData());
  closeLoading();
  await nextTick();
  machineTemperatureRef.value?.init(flag);
  machineHumidityRef.value?.init(flag);
  machineParticleRef.value?.init(flag);
  machinePCWFlowRef.value?.init(flag);
  machinePCWPressureRef.value?.init(flag);
  machinePVPressureRef.value?.init(flag);
};

defineExpose({
  areaChangeHandler
});
</script>

<template>
  <div v-loading="loading" class="machine-content">
    <fabBoardEchartsModelBoxItem
      ref="machineTemperatureRef"
      exportImage
      exportData
      :title="machineTemperatureTitle"
      :unit="machineTemperatureUnit"
      :data="machineTemperatureData"
      @exportDataChange="exportDataHandler(machineTemperatureData)"
    />
    <fabBoardEchartsModelBoxItem
      ref="machineHumidityRef"
      exportImage
      exportData
      :title="machineHumidityTitle"
      :unit="machineHumidityUnit"
      :data="machineHumidityData"
      @exportDataChange="exportDataHandler(machineHumidityData)"
    />
    <fabBoardEchartsModelBoxItem
      ref="machineParticleRef"
      exportImage
      exportData
      :title="machineParticleTitle"
      :unit="machineParticleUnit"
      :data="machineParticleData"
      @exportDataChange="exportDataHandler(machineParticleData)"
    />
    <fabBoardEchartsModelBoxItem
      ref="machinePCWFlowRef"
      exportImage
      exportData
      :title="machinePCWFlowTitle"
      :unit="machinePCWFlowUnit"
      :data="machinePCWFlowData"
      @exportDataChange="exportDataHandler(machinePCWFlowData)"
    />
    <fabBoardEchartsModelBoxItem
      ref="machinePCWPressureRef"
      exportImage
      exportData
      :title="machinePCWPressureTitle"
      :unit="machinePCWPressureUnit"
      :data="machinePCWPressureData"
      @exportDataChange="exportDataHandler(machinePCWPressureData)"
    />
    <fabBoardEchartsModelBoxItem
      ref="machinePVPressureRef"
      exportImage
      exportData
      :title="machinePVPressureTitle"
      :unit="machinePVPressureUnit"
      :data="machinePVPressureData"
      @exportDataChange="exportDataHandler(machinePVPressureData)"
    />
  </div>
</template>

<style lang="scss" scoped>
.machine-content {
  display: grid;
  grid-template-rows: repeat(2, v-bind(module_height));
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  // height: 100%;
}
</style>
